<template>
  <div class="content">
    <!-- <div>{{ zzKey }}</div> -->

    <div class="zzcot">
      <div class="keli_item" v-for="(item, index) in keliL">
        <div class="top">
          <div class="xing">{{ item.duanYu[0] }}</div>
          <div class="i_content">
            <div class="top1">
              <div class="ming">{{ item.duanYu.slice(1, 3) }}</div>
              <div class="sj">
                {{ item.year + "-" + item.month + "-" + item.day + "-" + item.hour }}
              </div>
            </div>
            <div class="bot1">{{ item.zhanShi }}</div>
          </div>
        </div>
        <div class="bot">
          <div class="item">{{ item.duanYu }}</div>
          <div class="item">{{ item.fanKui }}</div>
        </div>
      </div>
      <div style="min-height: calc(var(--nav_btn_height) + 1rem)"></div>
    </div>
  </div>
</template>

<script>
import { Highlight } from "vant";
import { selectXSGuFaKeLi, selectYudingZhiz } from "../../api/dbUtils";
import { 取六壬直指 } from "../../api/fzzl/zhiZhi";
import { 取毕法 } from "../../api/fzzl/bifa";
export default {
  name: "Test",
  async created() {
    await this.initZhizhi();
  },
  components: {
    Highlight,
  },
  data() {
    return {
      keliL: [],
    };
  },
  props: {
    zzKey: {
      type: Object, // 指定类型为对象
      required: true, // 是否必传
      // 可选：对象的默认值（必须用函数返回，避免引用类型共享）
    },
  },
  methods: {
    async initZhizhi() {
      this.keliL = await selectXSGuFaKeLi(this.zzKey.dgz, this.zzKey.gss);

      // alert(JSON.stringify(zhizhi.name))
      // let arrkname = zhizhi.name.split("\u3000");
      // this.kname = {
      //   name: arrkname[0],
      //   gs: arrkname[1],
      // };
      // alert(JSON.stringify(zhizhi.content))
      // this.content = JSON.stringify(zhizhi.content).replaceAll('\"', '').replaceAll('\\r\\n', "").split("\u3000");
      // alert(this.content.length)
      // alert(JSON.stringify(content))
      // this.content = this.splitTextByKeywords(
      //   JSON.stringify(zhizhi.content).replaceAll('"', "").replaceAll("\\r\\n", ""),
      //   this.keywords
      // );
    },
  },
  watch: {
    zzKey(newValue, oldValue) {
      this.initZhizhi();
    },
  },
};
</script>

<style lang="scss" scoped>
$lcbgc: var(--lr_lcbgc);

.content {
  max-width: 96vw;
  height: calc(100vh - 135rem - var(--safe-top));
  border-radius: 4rem;
  overflow: hidden;
  margin-left: 2vw;

  .zzcot {
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    padding-left: 2vw;
    padding-right: 2vw;
    height: calc(100vh - 135rem - var(--safe-top));
    color: #677381;
    color: black;
    font-weight: 400;

    background-color: $lcbgc;
    width: 94vw;

    .keli_item {
      width: 92vw;
      height: fit-content;
      margin-bottom: 5rem;
      margin-top: 5rem;
      align-items: center;
      display: flex;
      flex-direction: column;

      .top {
        display: flex;
        align-items: center;

        .xing {
          border-radius: 50%;
          background-color: #00c9a8;
          color: #ffffff;
          height: 40rem;
          width: 40rem;
          line-height: 40rem;
          text-align: center;
          font-size: 18rem;
        }

        .i_content {
          // background-color: whitesmoke;
          margin-left: 10rem;
          width: calc(92vw - 50rem);
          height: fit-content;
          display: flex;
          border-radius: 6rem;
          align-items: flex-start;
          flex-direction: column;

          .top1 {
            font-size: 15rem;

            .ming {
              font-weight: bold;
            }

            height: 25rem;
            line-height: 25rem;
            width: 100%;
            display: flex;
            justify-content: space-between;

            .sj {
              color: #6b72d2;
            }
          }

          .bot1 {
            line-height: 20rem;
            height: fit-content;
            width: 100%;
            // background-color: #a51818;
            color: #002c1c;
            font-size: 14rem;
            overflow: scroll;
            text-align: left !important;
          }
        }
      }

      .bot {

        width: 92vw;
        // background-color: #3e1b1b;
        align-items: center;
        display: flex;
        flex-direction: column;
        .item{
          line-height: 18rem;
          width: 92vw;
           text-align: left !important;
          margin-top: 5rem;
           color: #002c1c;
            font-size: 14rem;
            overflow: scroll;
        }
      }
    }
  }

  .last-item {
    border-bottom: none !important;
  }
}
</style>
